<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>banner PC demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
    <link rel="stylesheet" href="css/jquery.bxslider.css">
    <script src="js/jquery.bxslider.js"></script> 
    <h3 style="text-align:center; font-size:24px;">示例2左右滑(bxslider)</h3>
    <div class="bannerPc banner banner2">
        <ul class="bxslider">
            <li><a href="#"><img src="../欢太商城项目/images/1.jpg" alt="" title=""/></a> </li>
            <li><a href="#"><img src="../欢太商城项目/images/2.jpg" alt="" title=""/></a> </li>
            <li><a href="#"><img src="../欢太商城项目/images/3.jpg" alt="" title=""/> </a></li>
            <li><a href="#"><img src="../欢太商城项目/images/4.jpg" alt="" title=""/> </a></li>
        </ul>
        <script type="text/javascript">
            var scale = '';
            var speed = 500;
            var pause = 5;
            $(function () {
                $('.banner2 .bxslider').bxSlider({
                    mode: 'horizontal', /*滚动方式fade、vertical、horizontal*/
                    auto: true, /*自动滚动*/
                    autoControls: false, /*自动滚动按钮*/
                    infiniteLoop: true, /*循环滚动*/
                    hideControlOnEnd: true, /*无效按钮隐藏*/
                    adaptiveHeight: true, /*图片是否实际缩放比高度显示控制，图片比例不一样高度变化*/
                    minSlides: 1,
                    maxSlides: 1,
                    scale: scale,
                    speed: speed,
                    pause: pause * 1000
                });
            });
        </script> 
    </div>
    
    <!-- <div style="height:100px"></div> -->
</div>
</body>
</html>
